<!-- 评论列表 -->
<template>
  <div>
    <div class="common-list">
      <van-cell>
        <b>全部评论</b>
      </van-cell>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <CommentsItem
          v-for="(comment, index) in list"
          :key="index"
          :comment="comment"
          @reply-click="$emit('reply-click', $event)"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import { getComment } from "../../../api/comment";
import CommentsItem from "./comment-item.vue";
export default {
  name: "CommentList",
  data() {
    return {
      loading: false,
      finished: false,
      offset: null,
      limit: 10,
    };
  },
  /**
   * source: 获取文章的评论时传入文章id
   *
   *  */
  props: ["source", "list", "type"],
  methods: {
    async onLoad() {
      try {
        // 1.请求文章的评论数据
        let { data } = await getComment({
          type: this.type,
          source: this.source,
          offset: this.offset,
          limit: this.limit,
        });
        // 2.添加数据
        const { results } = data.data;
        this.list.push(...results);
        // 3.关闭加载状态
        this.loading = false;

        // 更新评论总数
        this.$emit("total_count", data.data.total_count);

        // 4.判断是否还有数据
        if (results.length) {
          // 更改页码
          this.offset = data.data.last_id;
        } else {
          this.finished = true;
        }
      } catch (error) {}
    },
  },
  components: {
    CommentsItem,
  },
};
</script>

<style lang="less" scoped>
</style>
